<template>
  <button @click="$emit('click')" :class="getClass" :style="computeStyle">
    <i v-if="loading" class="zc-icon-loading"></i>
    <i v-if="icon" :class="getIcon"></i>
    <span v-if="$slots.default">
      <slot></slot>
    </span>
  </button>
</template>

<script>
export default {
  name: 'ZcButton',
  props: {
    // width: {
    //   type: Number,
    //   default: 98
    // },
    // height: {
    //   type: Number,
    //   default: 40
    // },
    type: {
      type: String,
      default: 'default'
    },
    round: Boolean,
    loading: {
      type: Boolean,
      default: false
    },
    icon: {
      type: String,
      default: ''
    },
    disabled: Boolean,
    circle: Boolean
  },
  computed: {
    getClass() {
      // console.log(this.round)
      return [
        'zc-button',
        `zc-button-${this.type}`,
        { disabled: this.disabled },
        { round: this.round },
        { circle: this.circle }
      ]
    },
    getIcon() {
      return [`zc-icon-${this.icon}`]
    },
    computeStyle() {
      return {
        background: this.loading ? '#66b1ff' : ''
      }
    }
  },
  mounted() {
    const root = document.querySelector(':root')
    const btn = document.querySelector('.zc-button')
    const btnHeight = btn.clientHeight
    // const round = getComputedStyle(root).getPropertyValue("--round").trim()
    // console.log(btnHeight, round)
    root.style.setProperty('--round', `${Math.floor(btnHeight / 2)}px`)
  }
}
</script>

<style lang="scss">
// @import '@/style/index';
:root {
  --round: 20px;
}

.zc-button {
  padding: 12px 24px;
  outline: none;
  border: 0;
  cursor: pointer;
  border-radius: 8px;
  color: #fff;
  font-weight: 500;
  white-space: nowrap;
  display: flex;
  justify-content: center;
  align-items: center;
}
.zc-button-primary {
  background: $primary;
  &:hover,
  &:focus {
    background: #66b1ff;
    border-color: #66b1ff;
    color: #fff;
  }
}
.zc-button-success {
  background: $success;
  &:hover,
  &:focus {
    background: #85ce61;
    border-color: #85ce61;
    color: #fff;
  }
}
.zc-button-info {
  background: $info;
  &:hover,
  &:focus {
    background: #a6a9ad;
    border-color: #a6a9ad;
    color: #fff;
  }
}
.zc-button-warning {
  background: $warning;
  &:hover,
  &:focus {
    background: #ebb563;
    border-color: #ebb563;
    color: #fff;
  }
}
.zc-button-error {
  background: $error;
  &:hover,
  &:focus {
    background: #f78989;
    border-color: #f78989;
    color: #fff;
  }
}
.zc-button-default {
  background: $default;
  border: 1px solid #ccc;
  color: #606266;
  &:hover,
  &:focus {
    color: #409eff;
    border-color: #c6e2ff;
    background-color: #ecf5ff;
  }
}
.round {
  border-radius: var(--round);
}
.zc-icon-loading {
  margin-right: 5px;
  animation: rotate 3s infinite linear;
}
@keyframes rotate {
  to {
    transform: rotate(360deg);
  }
}
.disabled {
  cursor: not-allowed;
  background-image: none;
}
.circle {
  width: 50px;
  height: 50px;
  border-radius: 50%;
}
</style>
